@extends('layouts.master3')
@section('title')
赛题详情 
@endsection
@section('style')
    <link href="/css/login.css" rel="stylesheet">
    <link href="/css/challenges.css" rel="stylesheet">

    <link rel="stylesheet" href="/css/codemirror.css">
    <link rel="stylesheet" href="/js/display/fullscreen.css">
    <style>
        /*2016-06-18 @diego*/
        .codeMirrorTool{
            padding: 5px;
            background: #f6f6f6;
            border: 1px solid #bbb;
            border-bottom: none;
            overflow: hidden;
        }
        .codeMirrorTool .fullScreen,.codeLanguage,.dataSize{
            float: right;
        }
        .fullScreen,.codeLanguage{
            margin-left: 10px;
        }
	.codeLanguage,.dataSize{
            margin-top:5px;
        }
        .rank .row{
            /*	border-bottom: 1px solid #ddd;*/
        }
        .rank .row:nth-child(odd) {
            background:#f5f5f5;
        }
        .rank .row div{
            padding-top:5px;
            padding-bottom:5px;
        }
        a.tag{
            font-size: 12px;
            border: 1px solid #ddd;
            padding: 1px 6px;
            border-radius: 5px;
            margin-left: 10px;
            color: green;
            background-color: rgba(1,126,102,.08);
		}
		.spe{
			position:relative;
		}
		.spe h2{
			border-bottom:1px solid #aaa;
			padding-bottom:10px;
		}
    </style>

@endsection
@section('content')
    <div class="contain">
@include('contest/header',['type'=>'detail'])
        <section class="challenge-wrap">
            <div class="challenge-body">
                <div class="container spe">
                     <!-- 这里放挑战描述 s-->
<?php echo $task->content;?>
				</div> <!-- 这里放挑战描述 e-->
                </div>

                <div style="overflow:hidden;">                <!-- Comments Form -->
                    <h4>答案:</h4>

                    <div class="form-group">
                        <input type="hidden" name="_token" value="{{csrf_token()}}">
                        <input type="hidden" name="phref" value="/task/146/solve">

                        <div class="codeMirrorTool">
                            <button class="fullScreen">全屏</button>
                            <select class="codeLanguage" data-localName="dataSize">
                                <option data="text/x-python" value="Python">Python(2.7)</option>
                                <!--  <option data="text/javascript" value="javascript">javascript</option>-->
                            </select>
					</div>

					<textarea id="editor" name="editor">
#coding:utf-8
from Base import *

#所有自定义函数写在class内部
class Answer(Base):
    def solve(self, items):
        return self.bubblesort(items)
    def bubblesort(self, items):
        size = len(items)
        for i in range(size):
            for j in range(i+1, size):
                if not self.compare(items[i].id, items[j].id):
                    temp = items[i]
                    items[i] = items[j]
                    items[j] = temp
        return items     
</textarea>
				</div>
				<button type="submit" class="btn btn-primary solve pull-right">提交</button>

			</div>
		</div>

	</section>
</div>
<div style="height:60px;"></div>
</div>


<div class="task-shadow none"></div>
<img class="loadding_img none" src="/img/loadding.gif" alt="正在加载中" style="display: block;position: fixed;top: 50%;left: 50%;margin-top: -10px;margin-left: -50px;">
<div class="authority none" style="width:550px;position:fixed;top:50%;left:50%;margin-top:-265px;margin-left:-275px;z-index: 2222222">
<div class="authority-warp" style="position:relative">
	<a href="javascript:;" class="authority-close" style="position:absolute;top:6px;right:10px;">X</a>
	<div class="panel panel-login">
		<h2 style="margin-left: 30px;">千里码</h2>

		<p style="font-size: 18px;margin-left: 30px;">Code is cheap,show me the answer.</p>
		<!--<h2 style="margin-left: 30px;">千里码</h2>

	<p style="font-size: 18px;margin-left: 30px;">与开发者分享你的技术和实战经验</p>-->
		<div class="panel-heading">
			<div class="row">
				<div class="col-xs-6">
					<a href="#" class="active" id="login-form-link">登录</a>
				</div>
				<div class="col-xs-6">
					<a href="#" id="register-form-link" class="">注册</a>
				</div>
			</div>
			<hr>
		</div>
		<div class="panel-body">
			<div class="row">
				<div class="col-lg-12">
					<form id="login-form" action="/auth/login" method="post" role="form" style="display: block;">
						<input type="hidden" name="_token" value="qu1yHPvWdc28khuP1MqE0GPrFnuYWCaq1OWfteFa">
						<div class="form-group">
							<input type="text" name="email" id="email" tabindex="1" class="form-control" placeholder="邮箱" value="">
						</div>
						<div class="form-group">
							<input type="password" name="password" id="password" tabindex="2" class="form-control" placeholder="密码">
						</div>
						<div class="form-group text-center">
							<input type="checkbox" tabindex="3" class="" name="remember" id="remember">
							<label for="remember"> 记住我</label>
						</div>
						<div class="form-group">
							<div class="row">
								<div class="col-sm-6 col-sm-offset-3">
									<input type="submit" name="login-submit" id="login-submit" tabindex="4" class="form-control btn btn-login" value="登录">
								</div>
							</div>
						</div>
						<div class="form-group">
							<div class="row">
								<div class="col-lg-12">
									<div class="text-center">
										<a href="/password/email" tabindex="5" class="forgot-password">忘记密码?</a>
									</div>
								</div>
							</div>
						</div>
					</form>
					<form id="register-form" action="/auth/register" method="post" role="form" style="display: none;">

						<input type="hidden" name="_token" value="qu1yHPvWdc28khuP1MqE0GPrFnuYWCaq1OWfteFa">
						<div class="form-group">
							<input type="hidden" name="utm" id="utm" value="unknown">
						</div>
						<div class="form-group">
							<input type="text" name="name" id="name" tabindex="1" class="form-control" placeholder="用户名" value="">
						</div>
						<div class="form-group">
							<input type="email" name="email" id="email" tabindex="1" class="form-control" placeholder="邮箱" value="">
						</div>
						<div class="form-group">
							<input type="password" name="password" id="password" tabindex="2" class="form-control" placeholder="密码">
						</div>
						<div class="form-group">
							<input type="password" name="password_confirmation" id="password_confirmation" tabindex="2" class="form-control" placeholder="再次输入密码">
						</div>
						<div class="form-group">
							<div class="row">
								<div class="col-sm-6 col-sm-offset-3">
									<input type="submit" tabindex="4" class="form-control btn btn-register" value="提交">
								</div>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
</div>
</div>
<div class="result-alert none">
<div class="result_warp">
	<div class="warning">
		<i class="iconfont">&#xe616;</i><!-- true:&#xe617;   flase:&#xe616;  -->
	</div>
	<p>我是一条安安静静摸鱼的咸鱼~</p>
	<div class="query"><a class="btn btn-primary result-close">确定</a></div>
</div>
</div>
@endsection
@section('js')
<script src="/js/login.js"></script>
<script src="/js/codemirror.js"></script>
<script src="/js/mode/python/python.js"></script>
<script src="/js/mode/clike/clike.js"></script>
<script src="/js/mode/javascript/javascript.js"></script>
<script src="/js/display/fullscreen.js"></script>
<script type="text/javascript">
var testEditor;
//is pass?
var _flag=false;
$(function() {
	codeMirrorEditor();
	//个人常用语言
	var commonLan = localStorage.getItem("commonLanguage") || "";
//data size
	var _dataSize = localStorage.getItem("dataSize") || "";

	selectChoice(".codeLanguage",commonLan);
	selectChoice(".dataSize",_dataSize);
	function selectChoice(_class,val){
		$(_class).find("option[data='"+val+"']").prop("selected",true)
	}
	var javascript="console.log('hello world')";
	var python=$("#editor").html();
	var codeLanuage={javascript:javascript,python:python};
	$("select").change(function(){
		var type=$(this).find("option:selected").val();
            var child=$(this).find("option:selected").attr('data');
			 localStorage.setItem($(this).attr("data-localName"),child);
            $("#editor").html(codeLanuage[type]);
            $(".CodeMirror").remove();
            codeMirrorEditor(child);
        })

        $("button.solve").click(function(){
            var val=$("textarea.form-control").val() || localStorage.getItem("codeMirror");
            var token=$("input[name='_token']").val();
            var _href=$("input[name='phref']").val();
            var lan= "" || $(".codeLanguage").val() ;
	    var size = $(".dataSize").val();
            $(".task-shadow").toggleClass("none");
            $(".loadding_img").removeClass("none");
            $.ajax({
                url:_href,
                timeout:30000,
                type:"post",
                data:{answer:val,_token:token,lan:lan,size:size},
                dataType:"json",
                success:function(data){
					
						window.location.href="http://www.qlcoder.com/judge/status";
			    },
                complete:function(XMLHttpRequest,status){
                    if(status=='timeout'){
                        $(".result_warp").removeClass("none");
                        $(".result-alert").toggleClass("none").find(".warning").find("i").html("&#xe616;");
                        $(".result-alert p").html("请求超时，请重新尝试！");
                    }
                }
            })

        });
        $(".commentLogin").click(function(){
            $(".authority,.task-shadow").removeClass("none");
        })
        $(".result-close").click(function(){
            if(_flag){
                window.location.reload();
            }
            else{
                $(".task-shadow").addClass("none");
                $(".result-alert").addClass("none");
                $(".loadding_img").addClass("none");
            }
        })
        $(".authority-close").click(function(){
            $(".authority,.task-shadow").addClass("none");
        });
    });
    function codeMirrorEditor(mode){
        var myTextarea = document.getElementById('editor');
        var CodeMirrorEditor = CodeMirror.fromTextArea(myTextarea, {
            mode: mode || "text/x-python",
            lineNumbers: true,
//            value: localStorage.getItem("codeMirror") || "",
            extraKeys: {
                "F11": function(cm) {
                    cm.setOption("fullScreen", !cm.getOption("fullScreen"));
                },
                "Esc": function(cm) {
                    if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
                    $(".fullScreen").removeAttr("style").html("全屏");
                }
            }
        });
        $(".fullScreen").click(function(){
            CodeMirrorEditor.setOption("fullScreen", !CodeMirrorEditor.getOption("fullScreen"));
            if(CodeMirrorEditor.getOption("fullScreen")) {
                $(this).css({"position":"fixed","top":"5px","right":"5px","z-index":"11"}).html("取消全屏");
            }else{
                $(this).removeAttr("style").html("全屏");
            }
        });
        localStorage.setItem("codeMirror",$("#editor").val());
        //load code
        /*if(localStorage.getItem('codeMirror')){
         CodeMirrorEditor.setOption("value",localStorage.getItem("codeMirror") || "");
         }*/
        //save code
        CodeMirrorEditor.on("change",function(){
            localStorage.setItem("codeMirror", CodeMirrorEditor.getValue());
            console.log(localStorage.getItem("codeMirror"));
        })
	}
	$(".spe p").eq(0).css({'position':"absolute","right":"0","top":"63px","width":"350px","background":"white","text-align":"center"}).find('img').css("width","250px");
	$(".spe p").eq(0).append("<br><b style='width: 252px;display: block;margin: 0 auto;'>网银互联(股票代码:835239)专注于第三方商业数据中心服务领域，是浙江省内具有品牌优势的商业数据中心服务公司。</b>");
	$(".spe p").eq(1).css({'margin-bottom':"45px","line-height":"30px","width":"700px"});
	$(".spe table").addClass("table table-bordered table-hover");
</script>
@endsection
